<template>
  <div class="w100 flrc">
    <div class="padr5" v-if="config.inputPosition !== 'left'">
      <mu-chip color="primary" delete @delete="remove(item)" v-for="item in selectedItem" :key="item.value">{{item.label}}</mu-chip>
    </div>
    <div :class="{flex1:config.inputPosition !== 'left'}">
      <mu-text-field @keydown.enter="search" @change="search" @input="search" @focus="open = true" v-model="searchKey" placeholder="请选择" ref="show" action-icon="search" :action-click="()=>{open = !open}"></mu-text-field>
      <mu-popover :open.sync="open" :trigger="trigger">
        <div>
          <div class="">
            <mu-list>
              <mu-list-item @click="select(row)" button v-for="row in choices" :key="row.value">{{row.label}}</mu-list-item>
            </mu-list>
          </div>
          <div class="bdtso tar flrc">
            <mu-button small @click="lastPage" icon :disabled="query.page === 1">
              <mu-icon value="skip_previous"></mu-icon>
            </mu-button>
            <div class="flex1 tac">
              查询结果：{{query.total}}条
            </div>
            <mu-button small @click="nextPage" icon :disabled="query.page * query.limit >= query.total">
              <mu-icon value="skip_next"></mu-icon>
            </mu-button>
          </div>
        </div>
      </mu-popover>
    </div>
    <div class="flex1 padr5" v-if="config.inputPosition === 'left'">
      <mu-chip color="primary" delete @delete="remove(item)" v-for="item in selectedItem" :key="item.value">{{item.label}}</mu-chip>
    </div>
  </div>
</template>

<script>
export default {
  name: "EzSearch",
  props: {
    value: {},
    config: {}
  },
  data() {
    return {
      choices: [],
      open: false,
      trigger: null,

      inSideValue: 0,
      searchKey: "",
      selectedId:[],
      selectedItem:[],
      query:{
        page:1,
        limit:10,
        total:0
      }
    }
  },
  mounted() {
    this.trigger = this.$refs.show.$el

    if (this.config.isMultiple){
      this.selectedId = this.value === null?[]:this.value
    }else {
      this.selectedId = this.value === null?[]:[this.value]
    }

    this.inSideValue = this.value
    this.query.page = this.config.apiPage
    this.query.limit = this.config.apiLimit<0?5:this.config.apiLimit

    this.prepareData()
  },
  methods: {
    lastPage(){
      this.query.page--
      this.search(this.searchKey)
    },
    nextPage(){
      this.query.page++
      this.search(this.searchKey)
    },
    remove(item){
      this.selectedId = this.$utils.arrayDelValue(this.selectedId,item.value)
      this.prepareData()
    },
    search(){
      let where  = this.config.apiWhere
      if (this.config.apiSearchKeys.length > 0){
        let searches=[]
        for (let apiSearchKey of this.config.apiSearchKeys) {
          let toAdd = {}
          toAdd[apiSearchKey] = this.searchKey
          searches.push(toAdd)
        }
        where["_or"] = searches
      }
      this.$http.post(this.config.api, {
        _where:where,
        _order:this.config.apiOrder,
        page:this.query.page,
        limit:this.query.limit,
      }, res => {
        this.choices = res.data.lists
        this.query = res.data.query
      })
    },
    select(row){
      let find = false
      for (let id of this.selectedId) {
        if (row.value === id){
          find = true
        }
      }
      if (find){
        this.selectedId = this.$utils.arrayDelValue(this.selectedId,row.value)
      }else {
        if (this.config.isMultiple){
          this.selectedId.push(row.value)
        }else {
          this.selectedId = [row.value]
        }
      }
      this.prepareData()
    },
    prepareData(){
      if (this.selectedId === undefined)return;
      if (this.selectedId.length === 0 ){
        this.selectedItem = []
        return
      }
      if (this.selectedId.length === 1 && !this.selectedId[0]){
        this.selectedItem = []
        return
      }
      this.$http.post(this.config.api, {
        _where: {
          id__in:this.selectedId
        },
        _order:this.config.apiOrder,
        page:1,
        limit:0,
      }, res => {
        this.selectedItem = res.data.lists
      })
    }
  },
  watch: {
    selectedId(val) {
      if (this.config.isMultiple){
        this.$emit("input", val)
      }else {
        if (this.selectedId.length > 0){
          this.$emit("input", this.selectedId[0])
        }else {
          this.$emit("input", null)
        }
      }
    },
    open(v){
      if (v){
        this.search(this.searchKey)
      }
    }
  },
}
</script>

<style scoped>

</style>